<template>
	<view class="conten">
		<!-- 头像名称及等级区域 -->
		<view class="header" :id="userinfo.id">
			<view class="item-img">
				<image :src="userinfo.img" alt="" mode="aspectFill" />
			</view>
			<view class="item-info">
				<view class="item-name">{{userinfo.name}}</view>
				<view class="level-tag" :style="{backgroundColor: levelBg}">{{userinfo.level_name}}</view>
			</view>
			<view class="star-rating">★ {{userinfo.rating}}</view>
		</view>

		<!-- 会员引导区域 -->
		<view class="member-guide">
			<view class="guide-text">
				<text class="vip-tag">{{userinfo.vip_guide_title}}</text>
				<text class="guide-desc">{{userinfo.vip_guide_desc}}</text>
			</view>
			<view class="member-center" @click="goMemberCenter">
				<text>会员中心</text>
				<image src="/static/images/右箭头.png" alt="无" />
			</view>
		</view>

		<!-- 广告 banner 区域 -->
		<view class="ad-container">
			<image src="/static/images/banner1.png" alt="无" mode="widthFix" />
		</view>

		<!-- 优惠券、会员兑换 区域 -->
		<view class="Coupons-item">
			<view class="item coupon-box" @click="gocoupon">
				<view class="item-left">
					<view class="coupons-text">优惠券</view>
					<view class="coupons-num">{{userinfo.coupon_number}}张</view>
				</view>
				<view class="item-right">
					<image src="/static/images/banner1.png" alt="无" />
				</view>
			</view>
			<view class="item exchange-box">
				<view class="item-left">
					<view class="coupons-text">会员兑换</view>
					<view class="coupons-num">**</view>
				</view>
				<view class="item-right">
					<image src="/static/images/banner1.png" alt="无" />
				</view>
			</view>
		</view>

		<!-- 我的徽章 区域 -->
		<view class="badges-box">
			<view class="badges-title">我的徽章</view>
			<view class="badges-list">
				<image v-for="(badge, index) in userinfo.badges" :key="index" :src="badge" alt="徽章" class="badge-item" />
			</view>
		</view>

		<!-- 我的功能 区域 -->
		<view class="function">
			<view class="my-function">我的功能</view>
			<view class="function-button">
				<view class="function-centen" v-for="item in itmeData" :key="item.id" @click="handleFuncClick(item)">
					<image :src="item.img" alt="功能图标" class="function-icon" />
					<view class="function-wz">{{item.title}}</view>
				</view>
			</view>
		</view>

		<!-- 底部导航已存在，这里可根据实际 App 结构决定是否保留页面内底部文字，一般以 tabBar 为准，这里简化 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {
					id: 1,
					name: '爱大叔奶茶的大茗星',
					img: '/static/images/banner1.png',
					level_name: '见习萌新',
					rating: 4.1,
					vip_guide_title: '见习萌新',
					vip_guide_desc: '去下单开启会员之旅',
					coupon_number: 2,
					badges: [
						'/static/images/勋章-德.png',
						'/static/images/勋章-劳.png',
						'/static/images/勋章-智.png'
					]
				},
				itmeData: [{
						id: 1,
						img: '/static/images/积分乐园.png',
						title: '积分乐园',
						url: '/pages/score/score'
					},
					{
						id: 2,
						img: '/static/images/地址管理.png',
						title: '地址管理',
						url: '/pages/address/address'
					},
					{
						id: 3,
						img: '/static/images/券码兑换.png',
						title: '券码兑换',
						url: '/pages/coupon-exchange/coupon-exchange'
					},
					{
						id: 4,
						img: '/static/images/进福利群.png',
						title: '福利群',
						url: ''
					},
					{
						id: 5,
						img: '/static/images/学子卡.png',
						title: '学子卡',
						url: ''
					},
					{
						id: 6,
						img: '/static/images/送心意.png',
						title: '送心意',
						url: ''
					},
					{
						id: 7,
						img: '/static/images/联系客服.png',
						title: '联系客服',
						url: ''
					},
					{
						id: 8,
						img: '/static/images/故事-copy.png',
						title: '古茗故事',
						url: ''
					},
					{
						id: 9,
						img: '/static/images/icon3.png',
						title: '超值券包',
						url: ''
					},
					{
						id: 10,
						img: '/static/images/记录.png',
						title: '实物中奖记录',
						url: ''
					},
					{
						id: 11,
						img: '/static/images/收藏.png',
						title: '口味收藏',
						url: ''
					}
				],
				levelBg: '#fdf79e71'
			}
		},
		onLoad() {
			console.log('个人中心页面加载完成');
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			goMemberCenter() {
				uni.navigateTo({
					url: '/pages/member-center/member-center'
				});
			},
			gocoupon() {
				uni.navigateTo({
					url: '/pages/account/couponlist'
				});
			},
			handleFuncClick(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				} else {
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.conten {
		width: 100%;
		background-color: #f8f8f8;
	}

	/* 头像名称及等级区域 */
	.header {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background-color: #fff;

		.item-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-info {
			margin-left: 20rpx;

			.item-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.level-tag {
				display: inline-block;
				padding: 4rpx 12rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #333;
				border-radius: 16rpx;
			}
		}

		.star-rating {
			margin-left: 30%;
			font-size: 28rpx;
			color: #ffd700;
		}
	}

	/* 会员引导区域 */
	.member-guide {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 10rpx;

		.guide-text {
			.vip-tag {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
			}

			.guide-desc {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}

		.member-center {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 28rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
	}

	/* 广告 banner 区域 */
	.ad-container {
		width: calc(100% - 40rpx);
		margin: 20rpx auto;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 0 10rpx #e0e0e0;

		image {
			width: 100%;
		}
	}

	/* 优惠券、会员兑换 区域 */
	.Coupons-item {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-bottom: 20rpx;

		.item {
			width: 48%;
			height: 140rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 0 10rpx #e0e0e0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.coupons-text {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 8rpx;
				}

				.coupons-num {
					font-size: 24rpx;
					color: #ff7f50;
				}
			}

			.item-right {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	/* 我的徽章 区域 */
	.badges-box {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.badges-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.badges-list {
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;

			.badge-item {
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
				flex-shrink: 0;
			}
		}
	}

	/* 我的功能 区域 */
	.function {
		background-color: #fff;
		padding: 20rpx;

		.my-function {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.function-button {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.function-centen {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;

				.function-icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}

				.function-wz {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}
</style>